import Sprite from '../base/sprite'

const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

const BG_WIDTH = 512
const BG_HEIGHT = 512

/**
 * 游戏背景类
 * 提供update和render函数实现无限滚动的背景功能
 */
export default class BackGround extends Sprite {
  constructor(ctx) {
    super('', BG_WIDTH, BG_HEIGHT)

    this.top = 10

    this.render(ctx)
  }

  update() {
    this.top += 0

    if (this.top >= screenHeight)
      this.top = 0
  }

  /**
   * 背景图重绘函数
   * 绘制两张图片，两张图片大小和屏幕一致
   * 第一张漏出高度为top部分，其余的隐藏在屏幕上面
   * 第二张补全除了top高度之外的部分，其余的隐藏在屏幕下面
   */

  render(ctx) {
    let gradient = ctx.createLinearGradient(0, 0, 0, screenHeight);

    gradient.addColorStop(0, '#000011')
    gradient.addColorStop(1, '#060D1F')

    ctx.beginPath()
    ctx.globalCompositeOperation = "source-over"
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, screenWidth, screenHeight)
    ctx.fill()
    ctx.closePath()
  }
}